<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--Bootstrap5 核心 CSS 文件 -->
    <link rel="stylesheet" href="../personnel/css/bootstrap.min.css">
    <!--  popper.min.js 用于弹窗、提示、下拉菜单 -->
    <script src="../personnel/js/popper.min.js"></script>
    <!-- 最新的 Bootstrap5 核心 JavaScript 文件 -->
    <script src="../personnel/js/bootstrap.min.js"></script>
    <!-- 登录日志css样式 -->
    <link rel="stylesheet" href="css/yangshi.css">
    <!-- 登录日志vue -->
    <script src="../js/vue.js"></script>
    <!-- 登录日志jquery -->
    <script src="../js/jquery3.6.js"></script>
</head>
<body>
<div id="box">
    <div class="container-fluid mt-3">
        <div class="row height1">
            <div class="col p-3 bg-dark text-white"><h5>登录日志</h5></div>
        </div>
        <div class="row">
            <div class="row mt-3 flex-md-grow-0">
                </div>
                <div class="col">
                    <div class="row">
                        <div class="col p-3  text-white"></div>
                        <div class="col p-3  text-white">
                            <input type="date" v-model="datetimeBegin" id="datetimepicker1" name="datetimeBegin" class="form-control">
                        </div>
                        <div class="col p-3  text-white">
                            <input type="date" v-model="datetimeFinish" id="datetimepicker2" name="datetimeFinish" class="form-control">
                        </div>
                        <div class="col p-3  text-white">
                            <button type="button" class="btn btn-success" @click="search">搜索</button>
                            <button @click="dellogon()" type="button" class="btn btn-outline-danger ms-lg-3">删除</button>
                        </div>
                        <div class="col p-3  text-white"></div>
                    </div>
                </div>
            </div>
            <div class="col mt-3 text-white">
                <div class="container mt-0 position-relative">
                    <table class="table table-hover" style="text-align: center">
                        <thead>
                        <tr>
                            <th>删除</th>
                            <th>序号</th>
                            <th>用户id</th>
                            <th>登录时间</th>
                            <th>登录是否成功</th>
                            <th>IP地址</th>
                            <th>用户名</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="b in bilal" class="lh-48">
                            <td><input type="checkbox" v-model="check" :value="b.loginId"></td>
                            <td>{{b.loginId}}</td>
                            <td>{{b.userId}}</td>
                            <td>{{b.loginTime}}</td>
                            <td>{{success=b.ifSuccess==1?"登录成功":"登录失败"}}</td>
                            <td>{{b.loginUserIp}}</td>
                            <td>{{b.loginDesc}}</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>
<script>
    const vue = {
        data(){
            return{
                bilal:LoginLog(),
                datetimeBegin:null,         //开始时间
                datetimeFinish:null,         //结束时间
                check:[],                    //删除
                success:""

            }
        },
        methods:{
            search:function (){
                let datetimeFinish = new Date(Date.parse(this.datetimeFinish))
                let year = datetimeFinish.getFullYear()
                let month =datetimeFinish.getMonth()+1
                let day =datetimeFinish.getDate()+1
                let datetimeFinish2 = year+"-"+month+"-"+day
                this.bilal = LoginLog(this.datetimeBegin,datetimeFinish2)
            },
            dellogon:function (){
                if (this.check.length ==0){
                    alert("请选择")
                }else {
                    console.log(this.check)
                    $.ajax({
                        type: "post",
                        url: "../../LoginLogServlet?flag=delLogin",
                        data: {"loginId":this.check.join(",")},
                        async: false,
                        success:function (json){
                            alert("删除了"+json+"条数据")
                            app.bilal = LoginLog()
                        }
                    })
                }

            }
        }
    }
    let app = Vue.createApp(vue).mount("#box")
    //查询登录信息
    function LoginLog(datetimeBegin,datetimeFinish){
        let list;
        $.ajax({
            type: "post",
            url: "../../LoginLogServlet?flag=selLogin",
            data: {"datetimeBegin":datetimeBegin,"datetimeFinish":datetimeFinish},
            dataType: "json",
            async: false,
            success: function (json) {
                list = json
            }
        })
        return list;
    }
</script>

